<template>
  <ContentWrap>
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="名称" prop="name" class="w-280px">
        <el-input v-model="queryParams.name" clearable placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="guid" prop="guid" class="w-280px">
        <el-input v-model="queryParams.guid" clearable placeholder="请输入guid" />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-280px"
          end-placeholder="自定义时间"
          start-placeholder="自定义时间"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button type="primary" plain @click="openAdd">
          <Icon icon="ep:plus" class="mr-5px" /> 新增配置
        </el-button>
        <!-- <el-button type="success" plain @click="handleExport" :loading="exportLoading">
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button> -->
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
    <el-table v-loading="loading" :data="list" row-key="id">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="guid" prop="guid" />
      <el-table-column label="归属人" prop="ownerName">
        <template #default="scope">
          <span v-if="scope.row.ownerName">{{ scope.row.ownerName }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime">
        <template #default="scope">
          <span
            v-text="
              scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
            "
          ></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-space>
            <el-button type="primary" link @click="openDetail(scope.row)">查看</el-button>
            <el-button type="primary" link @click="openEdit(scope.row)">编辑</el-button>
            <el-button v-if="!scope.row.ownerId" type="primary" link @click="openBind(scope.row)">绑定</el-button>
            <el-button v-else type="primary" link @click="handelUnbind(scope.row)">解绑</el-button>
            <el-button type="danger" link @click="openDelete(scope.row)">删除</el-button>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <DetailDialog ref="detailDialogRef" @save="getList" @update="getList" />
  <BindDialog ref="bindDialogRef" @save="getList" />
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import * as WeWorkB2CApi from './api'
import dayjs from 'dayjs'
import download from '@/utils/download'
import DetailDialog from './detailDialog.vue'
import BindDialog from './bindDialog.vue'
import { ElMessageBox } from 'element-plus'

defineOptions({ name: 'WeWorkB2C' })

const { currentRoute, push } = useRouter() // 路由跳转
const loading = ref(true) // 列表的加载中
const exportLoading = ref(false) // 导出的加载中
const total = ref(2) // 列表的总页数
const list = ref<WeWorkB2CApi.WeWorkB2CVO[]>([]) // 列表的数据
const queryFormRef = ref<FormInstance>() // 搜索的表单
const detailDialogRef = ref() // 详情弹窗
const bindDialogRef = ref() // 绑定弹窗
// 表单搜索
const queryParams = ref({
  pageNo: 1, // 页数
  pageSize: 10, // 每页显示数量
  name: undefined as string | undefined,
  guid: undefined as string | undefined,
  createTime: undefined as string[] | undefined,
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await WeWorkB2CApi.getWeWorkB2CPage(unref(queryParams))
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = async () => {
  queryParams.value.pageNo = 1
  await getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.value = {
    pageNo: 1, // 页数
    pageSize: 10, // 每页显示数量
    name: undefined as string | undefined,
    guid: undefined as string | undefined,
    createTime: undefined as string[] | undefined,
  }
  handleQuery()
}
/** 查看详情 */
const openDetail = (data: any) => {
  detailDialogRef.value.open('detail', data)
}
/** 编辑 */
const openEdit = (data: any) => {
  detailDialogRef.value.open('edit', data)
}
/** 绑定 */
const openBind = (data: any) => {
  bindDialogRef.value.open(data.id)
}
/** 解绑 */
const handelUnbind = (data: any) => {
  ElMessageBox.confirm('确定解绑该企业微信AI坐席配置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await WeWorkB2CApi.unbindUser(data.id)
    await getList()
  })
}
/** 删除 */
const openDelete = (data: any) => {
  ElMessageBox.confirm('确定删除该企业微信AI坐席配置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await WeWorkB2CApi.deleteWeWorkB2C(data.id)
    await getList()
  })
}
/** 新增 */
const openAdd = () => {
  detailDialogRef.value.open('add', {})
}
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    ElMessageBox.confirm('确定导出该企业微信AI坐席配置吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      // 发起导出
      exportLoading.value = true
      const data = await WeWorkB2CApi.exportExcel(unref(queryParams))
      download.excel(data, '企业微信AI坐席配置.xls')
      exportLoading.value = false
    })
  } catch {
    exportLoading.value = false
  } finally {
    exportLoading.value = false
  }
}

// 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
watch(
  () => currentRoute.value,
  () => {
    getList()
  }
)

/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>
